<template>
  <div class="box">
    <h2>子组件 add</h2>
    <!-- 2在模板中渲染props  -->
    从父组件中获取的值:<label for="">{{ $store.state.nums }}</label>
    <br />
    <!-- 4 绑定函数 -->
    <button @click="add">值+1</button>
    <div>
      store数据的调用展示
    </div>
    <ul>
      <li>{{ $store.state.test }}</li>
      <li>{{ names }}</li>
      <li v-for="(item,index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<style lang="css">
.box {
  border: 1px solid #ccc;
  width: 200px;
  padding: 5px;
  margin: 20px;
}
</style>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "AddItem",
  // 1.定义props
  // props: {
  //   value: {
  //     type: Number
  //   }
  // },
  // 2.在模板中渲染props
  // 3.定义一个点击函数实现add +1
  computed: {
    ...mapState(["list"]),
    names() {
      return this.$store.state.test;
    }
  },
  methods: {
    ...mapMutations(["changeTest"]),
    add() {
      // 1. 取 props 中的 value
      // const val = this.value;
      // 2. value+1
      // 3. emit 把+1的值发送给父组件
      // this.$emit("input", val + 1);
      // 替换 emit 改为 修改 store.state
      this.$store.state.nums++;
      // this.$store.state.test = "wangnan";
      // 改成直接调用 mutations 对象内的方法
      // commit
      // this.$store.commit("changeTest", "wangnan");
      // 使用 mapMutations 方法注册的函数
      this.changeTest("wangnan");
    }
  }
};
</script>
